<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // window.onload=function(){
        //     var box= document.querySelector('#box');
        //     console.log(box);

        // }
        // 时间长 等标签，图像 样式   flash都加载完 成，才执行回调函数
        window.addEventListener('load', function () {
            var box = document.querySelector('#box');
            console.log(box);
            console.log('aaa'); 
        });
        //速度要快一点 ，只要标签加载完毕即可     ，适合图像多的网站
        window.addEventListener('DOMContentLoaded', function () {
            console.log('bbb');
        })

    </script>
</head>

<body style="height:2000px ;">
    <!-- 
        1.一张页面或一幅图像完成加载  onload
       window.onload=function(){

       }
       window.addEventListener('load',funtion(){

       });

       2.窗口加载事件DOMContentLoaded

       3.窗口尺寸改变事件onresize   响应式
       4. 当窗口滚动或者页面滚动  onscroll 
     -->
    <div id="box"></div>

    <script>
        window.onresize = function () {
            console.log('窗口尺寸改变了~~~');
        }

        // window.onscroll=function(){
        //      console.log('页面滚动了');
        //      console.log(window.pageYOffset,document.documentElement.scrollTop,document.body.scrollTop);
        // }

        document.onscroll = function () {
            console.log('页面滚动了');
            console.log(window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop);
        }
    </script>




</body>

</html>